<template>
	<view>
		<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	</view>
	<view class="layout" v-show="!showLoading">
		<cu-custom :isBack="true" background="rgba(226, 226, 226, 0.1)" :needFill="false">
			<block slot="content"></block>
		</cu-custom>
		<!-- 图片 -->
		<view class="swiperbox">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in goodsImageList" key="index">
					<image :src="item.uri" mode=""></image>
					{{ item.uri }}
				</swiper-item>
			</swiper>
		</view>

		<!-- 文字 -->
		<view class="goods-box">
			<!-- 积分 -->
			<view class="goods-price">积分{{ goodsPrice }}</view>
			<view class="goods-title">{{ goodsName }}</view>
		</view>

		<view class="goods-detail">
			<view class="goods-zi">产品详细</view>
		</view>

		<view class="goods-detail-img">
			<image :src="goodsMainImage" mode=""></image>
		</view>

		<view class="goods-car-plus">

			<view class="add-box">
				<view class="add-goods">数量选择</view>
				<view class="add-count">
					<up-number-box iconStyle="color: #356bff" bgColor="#ffffff" v-model="value"
						@change="valChange"></up-number-box>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn-goods-add" @click="show = true">
				立即兑换
			</view>
			<!-- 弹窗 -->
			<up-popup :round="10" :show="show" @close="close" @open="open">
				<view class="pop-box">
					<h2 style="margin: 53rpx 316rpx 0 316rpx; font-size: 30rpx; font-weight: 800;">提货方式</h2>
				</view>
				<!-- 选择方式 -->
				<view class="pop-body"
					style="width: 639rpx; height: 100rpx; margin: 66rpx 56rpx 0 55rpx; display: flex;">
					<!-- 左边 -->
					<view class="pop-self" :style="{ borderColor: selected === 'self' ? '#14288C' : '#E5E5E5' }"
						@click="select('self')">
						<view class="pop-self-icon">
							<image src="../../static/shops.png" mode=""></image>
						</view>

						<view class="pop-self-zi">
							自提
						</view>
					</view>

					<!-- 右边邮递 -->
					<view class="pop-trade" :style="{ borderColor: selected === 'trade' ? '#14288C' : '#E5E5E5' }"
						@click="select('trade')">
						<view class="pop-trade-icon">
							<image src="../../static/cars.png" mode=""></image>
						</view>

						<view class="pop-trade-zi">
							物流
						</view>

					</view>
				</view>

				<!-- 按钮 -->
				<!-- 按钮 -->
				<view class="bt-select-fn"
					style="width: 587rpx; height: 80rpx; margin: 96rpx 97rpx 60rpx 84rpx; display: flex;">
					<view @click="close" class="bit-select-cancel"
						style="width: 280rpx; height: 80rpx; 
											color: #262626; border-radius: 30rpx; background: #E8E8E8; padding: 25rpx 0 0 110rpx; box-sizing: border-box; font-size: 26rpx;">取消</view>

					<view @click="goPage" class="bit-select-confirm" style="width: 280rpx; height: 80rpx; 
											color: #ffffff; border-radius: 30rpx; margin: 0 0 0 27rpx;
											 background: #14288c; padding: 25rpx 0 0 115rpx; box-sizing: border-box; font-size: 26rpx;">确定</view>
				</view>


			</up-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
	} from '@dcloudio/uni-app'
	import api from '../../common/apiService'

	const {
		getGoodsDetail
	} = api;
	const goodsImageList = ref([]);
	const goodsInfo = ref({
		is_express: 0,
		is_selffetch: 0,
		integral: 0,
		stock: 0,
		remark: '',

	})
	const goodsId = ref(0)
	// 加载动画
	const showLoading = ref(true)
	const goodsMainImage = ref('');
	// 页面传参
	onLoad((e) => {
		console.log(e);
		goodsId.value = e?.gid
	})

	onMounted(() => {
		const gid = goodsId.value;
		getGoodsDetail(gid).then(data => {
				// console.log(data)
			if (data) {
				goodsInfo.value = {
					is_express: data.is_express,
					is_selffetch: data.is_selffetch,
					integral: data.integral,
					stock: data.stock,
					remark: data.remark,
				};
				goodsPrice.value = data.integral;
				goodsName.value = data.name;
				goodsMainImage.value = data.image;
				goodsImageList.value = data.goods_image;
				// console.log(data.goods_image);
			}
		}).catch(e => {
			// console.log(e)	
			uni.showToast({
				title: e.msg || '请求失败，请稍后再试',
				icon: 'none'
			});

		}).finally(() => {
			showLoading.value = false;
		})
	});
	
	const goodsName = ref('')
	const goodsPrice = ref(0)


	const goodscount = ref(1)

	// 创建响应式数据  
	const value = ref(1);

	// 定义方法  
	function valChange(e) {
		console.log('当前值为:', e.value);
		goodscount.value = e.value
		console.log('得到', goodscount.value)
	}
	// 弹窗
	const show = ref(false);

	// 定义方法  
	function open() {
		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
		// console.log('open');  
	}

	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
		// console.log('close');  
	}

	// 选中状态
	const selected = ref('self'); // 默认选中自提

	const select = (type) => {
		selected.value = type; // 更新选中的类型
	};

	// 跳转
	const goPage = () => {
		uni.navigateTo({
			url: '/pages/orderconfirm/orderconfirm?goodsId=' + goodsId.value + '&goodscount=' + goodscount.value + '&selected=' +
				selected.value
				
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		background: #efefef;

		.swiperbox {
			width: 750rpx;
			height: 750rpx;

			swiper {
				width: 750rpx;
				height: 750rpx;

				swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		.goods-box {
			background: #ffffff;
			width: 750rpx;
			height: 260rpx;
			// border: 1px solid red;

			.goods-price {
				width: 200rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ff6000;
				font-size: 36rpx;
				font-weight: 500;
				// margin: 0 0 0 36rpx;
				padding: 60rpx 0 0 36rpx;
			}

			.goods-title {
				width: 648rpx;
				height: 82rpx;
				line-height: 41rpx;
				// border: 1px solid red;
				margin: 35rpx 66rpx 0 36rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				max-height: 82rpx;
			}
		}


		// 详细
		.goods-detail {
			width: 750rpx;
			height: 133rpx;
			line-height: 133rpx;
			// border: 1px solid red;
			margin: 20rpx 0 0 0;
			background: #ffffff;

			.goods-zi {
				width: 200rpx;
				height: 31rpx;
				padding: 60rpx 0 0 40rpx;
				// border: 1px solid red;
				font-size: 32rpx;
				font-weight: 800;
				line-height: 31rpx;
			}
		}

		// 产品
		.goods-detail-img {
			width: 750rpx;
			height: 1099rpx;
			padding-bottom: 200rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


		// 加减
		.goods-car-plus {
			width: 750rpx;
			height: 270rpx;
			background: #ffffff;
			position: fixed;
			bottom: 0;
			border-top-right-radius: 10rpx;
			border-top-left-radius: 10rpx;


			.add-box {
				display: flex;
				width: 750rpx;
				height: 80rpx;
				line-height: 80rpx;

				// border: 1px solid red;
				.add-goods {
					// border: 1px solid red;
					width: 130rpx;
					height: 25rpx;
					line-height: 25rpx;
					margin: 35rpx 0 0 40rpx;
					font-size: 26rpx;
				}

				.add-count {
					width: 170rpx;
					height: 80rpx;
					line-height: 80rpx;
					// border: 1px solid red;
					margin: 20rpx 0 0 350rpx;
				}
			}

			// 按钮
			.btn-goods-add {
				width: 680rpx;
				height: 88rpx;
				// border: 1px solid red;
				margin: 46rpx 25rpx 0 45rpx;
				border-radius: 40rpx;
				background: #14288c;
				box-sizing: border-box;
				padding: 20rpx 280rpx 0 281rpx;
				color: #ffffff;
				font-size: 30rpx;
			}


			// pop弹窗
			.pop-box {
				width: 750rpx;
			}

			.pop-self {
				width: 310rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				border: #14288c solid 1px;
				display: flex;

				.pop-self-icon {
					width: 38rpx;
					height: 38rpx;
					line-height: 38rpx;
					margin: 30rpx 0 0 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pop-self-zi {
					width: 70rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					// border: 1px solid red;
					margin: 36rpx 0 0 10rpx;
				}
			}


			// 右边
			.pop-trade {
				width: 310rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				border: #14288c solid 1px;
				margin: 0 0 0 19rpx;
				display: flex;

				.pop-trade-icon {
					width: 42rpx;
					height: 38rpx;
					line-height: 38rpx;
					margin: 30rpx 0 0 100rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				// 物流字
				.pop-trade-zi {
					width: 70rpx;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 30rpx;
					// border: 1px solid red;
					margin: 36rpx 0 0 10rpx;
				}
			}

		}
	}
</style>